<template>
  <Card>
    <Button type="primary" :disabled="!categoryStore.category3Id" @click="showSaveSpu">
      <template #icon><PlusOutlined /></template>
      添加SPU
    </Button>

    <Table
      :data-source="spuList"
      :pagination="{
        pageSizeOptions: ['3', '6', '9', '12'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total) => `总共 ${total} 条`,
        current: currentPage,
        pageSize,
        total,
        onChange: getSpuList,
        onShowSizeChange: getSpuList,
      }"
      :loading="tableLoading"
      rowKey="id"
      bordered
      class="spu-table"
    >
      <TableColumn key="index" title="序号" width="80px" align="center">
        <template #default="{ index }">
          <span>
            {{ index + 1 }}
          </span>
        </template>
      </TableColumn>

      <TableColumn key="spuName" title="SPU名称" data-index="spuName" />
      <TableColumn key="description" title="SPU描述" data-index="description" />
      <TableColumn key="oprator" title="操作" width="220px">
        <template #default="{ record }">
          <Tooltip placement="top">
            <template #title>
              <span>添加SKU</span>
            </template>
            <Button type="primary" class="spu-btn">
              <template #icon> <PlusOutlined /> </template>
            </Button>
          </Tooltip>
          <Tooltip placement="top">
            <template #title>
              <span>更新SPU</span>
            </template>
            <Button class="spu-btn" @click="showUpdateSpu(record)">
              <template #icon> <EditOutlined /> </template>
            </Button>
          </Tooltip>
          <Tooltip placement="top">
            <template #title>
              <span>查看SKU列表</span>
            </template>
            <Button class="spu-btn">
              <template #icon> <InfoCircleOutlined /> </template>
            </Button>
          </Tooltip>
          <Tooltip placement="top">
            <template #title>
              <span>删除SKU</span>
            </template>
            <Button type="primary" danger class="spu-btn">
              <template #icon> <DeleteOutlined /> </template>
            </Button>
          </Tooltip>
        </template>
      </TableColumn>
    </Table>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Button, Table, TableColumn, Tooltip, message } from 'ant-design-vue';
  import {
    PlusOutlined,
    EditOutlined,
    InfoCircleOutlined,
    DeleteOutlined,
  } from '@ant-design/icons-vue';
  import { useCategoryStore } from '/@/store/modules/category';
  import { getSpuListApi } from '/@/api/product/spu';
  import { spuListModel } from '/@/api/product/model/spuModel';

  const emits = defineEmits(['setIsShow', 'setSpu']);

  const categoryStore = useCategoryStore();
  const spuList = ref<spuListModel>([]);
  const currentPage = ref(1);
  const pageSize = ref(3);
  const total = ref(0);
  const tableLoading = ref(false);

  const getSpuList = async (page: number, limit: number, store: any) => {
    const currentStore = store || categoryStore;
    tableLoading.value = true;
    currentPage.value = page;
    pageSize.value = limit;
    const res = await getSpuListApi({ page, limit, category3Id: currentStore.category3Id });
    spuList.value = res.records;
    total.value = res.total;
    tableLoading.value = false;
    message.success('获取spu列表成功');
  };

  watch(
    categoryStore,
    (store) => {
      const { category3Id } = store;

      if (!category3Id) {
        if (spuList.value.length) {
          spuList.value = [];
        }
        return;
      }

      getSpuList(currentPage.value, pageSize.value, store);
    },
    { immediate: true },
  );

  const showSaveSpu = () => {
    emits('setIsShow', 2);
    emits('setSpu', {
      spuName: '',
      description: '',
      tmId: undefined,
      spuSaleAttrList: [],
      spuImageList: [],
    });
  };

  const showUpdateSpu = (spu) => {
    emits('setIsShow', 2);
    emits('setSpu', {
      ...spu,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  };
</script>

<style scoped>
  .spu-table {
    margin-top: 15px;
  }

  .spu-btn {
    margin-right: 10px;
  }
</style>
